<script setup lang="ts">
import { showSuccessToast, showFailToast } from 'vant';
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import { API } from '../api';
import { MUserEntity } from '../api/_Api';
import { UnwrapRef } from 'vue';
import { validPhone } from '../utils/tools';
const router = useRouter()
const route = useRoute()
const { id, phoneNum, realName, nickName } = route.query
const loading = ref(false)
const onSubmit = async (values: UnwrapRef<typeof form>) => {
    if (!validPhone(values.phoneNum)) {
        return showFailToast({ message: '手机号码格式不正确~' });
    }
    console.log('submit', values);
    try {
        loading.value = true
        if (form.value.id) {
            const { data: { data } } = await API.userControllerUpdate({ ...form.value, password: values.password ? values.password : undefined })
            console.log("🚀 ~ onSubmit ~ data:", data)
        } else {
            const { data: { data } } = await API.userControllerAdd(form.value)
            console.log("🚀 ~ onSubmit ~ data:", data)
        }
        showSuccessToast({ message: form.value.id ? '修改成功~' : '录入成功~' });
        router.push('/userlist')
    } finally {
        loading.value = false
    }
};
const form = ref({ id: String(id || ''), phoneNum: String(phoneNum || ''), nickName: String(nickName || ''), realName: String(realName || ''), password: '', type: 'xyc' } as MUserEntity)
// const showPickerBrand = ref(false);
// const brandList = [
//     { text: "京东家电", value: '1' },
//     { text: "日立中央空调", value: '2' },
//     { text: "金玉名家肌肤砖", value: '3' },
//     { text: "德田陶瓷", value: '4' },
//     { text: "申旺卫浴", value: '5' },
//     { text: "希箭卫浴", value: '6' },
//     { text: "帅康厨电", value: '7' },
//     { text: "鼎配全屋定制", value: '8' },
//     { text: "奥克全屋定制", value: '9' },
//     { text: "至美美学定制", value: '10' },
//     { text: "飞宇门窗", value: '11' },
//     { text: "乐臣木门", value: '12' },
//     { text: "梵戴克地板", value: '13' },
//     { text: "三棵树", value: '14' },
//     { text: "慕思V6家居", value: '15' },
//     { text: "爱舒床垫", value: '16' },
//     { text: "名家布艺", value: '17' },
//     { text: "西蒙电气", value: '18' },
//     { text: "联塑管道", value: '19' },
// ];
// const onConfirmBrand = ({ selectedOptions }: any) => {
//     form.value.brand = selectedOptions[0]?.text;
//     showPickerBrand.value = false;
// }
</script>

<template>
    <van-form @submit="onSubmit" class="form">
        <van-cell-group inset>
            <van-field v-model.trim="form.nickName" name="nickName" label="店员姓名" placeholder="店员姓名"
                :rules="[{ required: true, message: '请填写店员姓名' }]" />
            <van-field v-model.trim="form.phoneNum" name="phoneNum" label="店员手机号" placeholder="店员手机号"
                :rules="[{ required: true, message: '请填写店员手机号' }, { required: true, message: '手机号码格式不正常~', pattern: /^(?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[0-35-9]\d{2}|4(?:0\d|1[0-2]|9\d))|9[0-35-9]\d{2}|6[2567]\d{2}|4(?:(?:10|4[01])\d{3}|[68]\d{4}|[579]\d{2}))\d{6}$/ }]" />
            <van-field v-model.trim="form.realName" name="realName" label="品牌" placeholder="品牌"
                :rules="[{ required: true, message: '请填写品牌' }]" />
            <van-field v-model.trim="form.password" name="password" label="密码"
                :placeholder="!form.id ? '密码' : '不填写则不修改'"
                :rules="!form.id ? [{ required: true, message: '请填写密码' }] : []" />
            <!-- <van-popup v-model:show="showPickerBrand" position="bottom">
                <van-picker :columns="brandList" @confirm="onConfirmBrand" @cancel="showPickerBrand = false" />
            </van-popup> -->
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="primary" native-type="submit" :loading="loading">
                提交
            </van-button>
        </div>
    </van-form>
</template>

<style scoped lang="less">
.form {
    padding: 30px 0;
    min-height: 100vh;
    width: 100vw;
}
</style>
